/**
 * 学习目标：props的特点
 * 步骤：
 * 1. props可以传任意类型的数据，甚至是函数、标签结构
 * 2. props是单向数据流，不允许修改props的值
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 1.创建一个类组件
class Child extends React.Component {
  handleClick = () => {
    console.log('我是子组件，我被点击了');
    console.log(this.props, 'props对象');
    // 2. 通过this.props.clickFn来调用传来的函数
    // this.props.clickFn();
    this.props.msg = 'hello React';
  };
  render() {
    return (
      <div>
        <h1>
          <button onClick={this.handleClick}>点我触发props传来的函数</button>
          {this.props.msg}
        </h1>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 1.1 通过props传递函数  */}
        <Child
          clickFn={function () {
            alert('我被子组件触发了');
          }}
          msg={<i>我是一个i标签</i>}
        ></Child>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
